{% include 'admin/header.html' %}

<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      {% include 'admin/nav.html' %}

      <main class="lyear-layout-content">
        <div class="container-fluid">

          <!-- 卡片标题部分 -->
          <div class="alert alert-info mb-4" role="alert">
            此页面用于查询宿舍水电费。
          </div>

          <div class="card shadow-sm mb-4">
            <header class="card-header d-flex justify-content-between align-items-center">
              <h4 class="card-title mb-0 text-primary">水电费用查询</h4>
              <div>
                <a href="{{ url_for('main.add_meter_reading') }}" class="btn btn-outline-primary btn-sm">水电抄表</a>
              </div>
            </header>

            <!-- 查询表单 -->
            <div class="card-body">
              <form class="form-inline justify-content-between align-items-center" method="GET" action="{{ url_for('main.query_utility_fee') }}">
                <div class="form-group mb-2">
                  <label for="month" class="form-label mr-2">选择月份</label>
                  <input type="month" id="month" name="month" class="form-control  w-auto" value="{{ selected_month or '2025-02' }}">
                </div>
                <div class="form-group mb-2">
                  <label for="dorm_id" class="form-label mr-2">选择宿舍</label>
                  <select id="dorm_id" name="dorm_id" class="form-control">
                    <option value="">所有宿舍</option>
                    {% for dorm_id, dorm_name in dorm_dict.items() %}
                      <option value="{{ dorm_id }}" {% if dorm_id == dorm_id %}selected{% endif %}>
                        {{ dorm_name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
                <button type="submit" class="btn btn-primary ml-3">查询</button>
              </form>
            </div>
          </div>

          <!-- 提示信息 -->
          {% if message %}
            <div class="alert alert-{{ message_type }}" role="alert">
              {{ message }}
            </div>
          {% endif %}

          <!-- 水电费用表格 -->
          <div class="card shadow-sm">
            <div class="card-body">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                  <tr>
                    <th>宿舍名称</th>
                    <th>月份</th>
                    <th>水费</th>
                    <th>电费</th>
                    <th>总费用</th>
                  </tr>
                </thead>
                <tbody>
                  {% if utility_fees %}
                    {% for fee in utility_fees %}
                      <tr>
                        <td>{{ dorm_dict[fee.dorm_id] }}</td>
                        <td>{{ fee.month.strftime('%Y-%m') }}</td>
                        <td>{{ fee.water_fee }} 元</td>
                        <td>{{ fee.electric_fee }} 元</td>
                        <td>{{ fee.total_fee }} 元</td>
                      </tr>
                    {% endfor %}
                  {% else %}
                    <div class="alert alert-info" role="alert">
                      没有找到相关数据。
                    </div>
                  {% endif %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

{% include 'admin/footer.html' %}
</body>
